<template>
  <div class="product">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-button
        type="primary"
        size="mini"
        class="insbut"
        icon="el-icon-circle-plus-outline"
        @click="dialogFormVisible = true"
        >新增轮播图</el-button
      >
      <div class="conter">
        <el-table :data="tableData" border stripe>
          <el-table-column
            type="index"
            :index="indexNum"
            label="序号"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="id" label="轮播图ID" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="shuffl_image"
            label="封面图"
            width="400"
            align="center"
          >
            <template slot-scope="scope">
              <img
                :src="api + scope.row.shuffl_image"
                min-width="80"
                height="100"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="创建时间"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column label="禁用/启用" width="140" align="center">
            <template slot-scope="scpoe">
              <el-switch
                v-model="scpoe.row.state"
                active-text="启用"
                inactive-text="禁用"
                @change="toggle(scpoe.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="Deleteadmin(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加产品弹框 对话框-->
      <el-dialog title="新增轮播图" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="封面图" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="uploadimageapi+'/shuffluploadimage'"
              :show-file-list="false"
              name="shufflimagefiles"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="Insertshuffl()">新 增</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      form: {
        image: ""
      },
      imageUrl: "",
      
      api: this.imageapi,
      uploadimageapi: this.uploadimageapi,//全局定义
      formLabelWidth: "80px",
      dialogFormVisible: false
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    // 先上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.image = res.path;
    },
    // 提交图片和数据去服务器 插入数据
    Insertshuffl() {
      const that = this;
      that.$http
        .post("/insertshufflimage", that.form)
        .then(res => {
          // console.log(res);
          if (res.status == 204) {
            that.$message({
              message: "上传轮播图成功...",
              type: "success"
            });
            // that.init();
          } else {
            that.$message({
              message: "上传轮播图失败...",
              type: "error"
            });
          }
          console.log(res);
          that.dialogFormVisible = false;
          this.init();
          this.reload();
        })
        .catch(function() {});
    },
    //请求后端数据
    init() {
      const that = this;
      this.$http
        .get("/showshufflimage")
        .then(res => {
          // console.log(res);
          that.tableData = res.data;
          for (let i in that.tableData) {
            if (that.tableData[i].state == 1) {
              that.tableData[i].state = true;
            } else {
              that.tableData[i].state = false;
            }
          }
        })
        .catch(function() {
          alert("请求数据失败...");
        });
    },
    //element table自带序号
    indexNum(index) {
      return index + 1;
    },
    // switch开关改变 触发的回调函数 是否展示轮播图
    toggle(id) {
      this.$http.post("/shufflingswitch", { id });
    },
    //删除轮播图
    Deleteadmin(id) {
      const that = this;
      that
        .$confirm("此操作将数据永久删除,不可恢复, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          that.$http.post("/deleteshuffling", { id }),
            that.$message({
              type: "success",
              message: "删除成功!"
            });
          for (let i in that.tableData) {
            if (that.tableData[i].id == id) {
              that.tableData.splice(i, 1); //删除不请求数据，直接在数组中删除
              break;
            }
          }
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
.avatar-uploader /deep/ .el-upload {
  border: 2px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 450px;
  height: 200px;
  display: block;
}
</style>